<template>
   <div class="main-page-wrapper">
      <div class="main-container">
            <div class="focus-container">
                <div class="focus-title">
                    <span>健身视频管理</span>
                </div>
                <div class="strategy-main">
                    <div id="leftList">
                         <p><a style="text-decoration:none" >新建模块</a></p>
                         <ul class="list">
                            <li :key=item v-for="item in [1,2,3,4]">
                                {{item}}
                            </li>
                         </ul>
                    </div>
                    <div id="rightList">
                         <p><a style="text-decoration:none"  >新建视频</a></p>
                        <ul class="list" id="rightList">
                            <li :key=item v-for="item in [1,2,3,4]">
                                {{item}}
                            </li>
                    </ul>
                    </div>
                     
                </div>
            </div>
      </div>
  </div>
</template>
<script>
export default {
  
}
</script>
<style scoped>
   .focus-container{
        height: 100%;
        border: 1px solid #ddd;
        border-radius:5px;
        position: relative;
    }
    .focus-title{
        height: 60px;
        background-color: #dddddd;
    }
     .focus-title span{
        margin-left: 20px;
         text-align: left;
        line-height: 60px;
    }

    .strategy-main{
        position: absolute;
        width: 100%;
        top:60px;
        left:0;
        bottom:0;
        display: flex;
        
    }
    .strategy-main p {
       width:100%;
       text-align: center;
       border-bottom: 1px solid #ddd;
       margin-top:0;
       margin-bottom: 0;
       height: 30px;
       line-height:30px;
       cursor:pointer;
   }
    .strategy-main .list{
       width:100%;
       margin-bottom: 0;
       padding-left: 0;
       margin-top: 0;
      
   }
    #leftList{
        width:200px;
        border-right: 1px solid #ddd;
    }
    #rightList{
        width: 300px;
         border-right: 1px solid #ddd;
    }
    .list{
       width:100%;
       margin-bottom: 0;
       padding-left: 0;
       margin-top: 0;
      
   }
   .strategy-main li{
       border-bottom: 1px solid #ddd;
       height: 50px;
       line-height: 50px;
       text-align: center;
       list-style-type:none;
         cursor:pointer;
   }
   .strategy-main li:hover{
       background-color:beige;
   }
</style>
